<template>
  <page-container title="订单" :showBack="false">
    <view class="header-right-warps" :style="{ top: navBarHeight + statusBarHeight + 'px' }">
      <view class="right-header-btn" @click="toSettledOrder">已结算订单</view>
    </view>
    <!-- 订单列表 -->
    <scroll-view class="order-list" 
      scroll-y
      :style="{ height: 'calc(100vh - ' + navBarHeight + 'px)', paddingTop: navBarHeight + 'px'}"
      :refresher-threshold="80" 
      @refresherrefresh="onRefresh" 
      :refresher-enabled="true"
      :refresher-triggered="refreshing" 
      :refresher-background="'#f5f5f5'" 
      :refresher-default-style="'black'" 
      @scroll="onScroll"
      ref="scrollView">


      <!-- 下拉刷新指示器 -->
      <view v-if="refreshing && orderList.length > 0" class="refresher-container">
        <view class="refresher-loading">
          <text class="loading-text">刷新中...</text>
          <view class="loading-dots">
            <view class="dot"></view>
            <view class="dot"></view>
            <view class="dot"></view>
          </view>
        </view>
      </view>

      <view class="order-item" v-for="(item, index) in orderList" :key="item.id" @click="handleDetails(item)">
        <view class="order-content">
          <view class="order-header">
            <text class="order-no">订单号：{{ item.orderNo }}</text>
            <text class="order-status" :class="orderStatusStyle[item.orderStatus]">{{
              orderStatusOptions[item.orderStatus]
            }}</text>
          </view>
          <view class="order-info-warps">
            <view class="order-info">
              <text class="order-time">{{ item.orderTime }}</text>
            </view>
          </view>
          <view class="order-info-warps">
            <view class="order-info">
              <text class="order-no">物料：{{ materialTypeOptions[item.materialType] }}</text>
            </view>
            <view class="order-info">
              <text class="order-no">买/卖：{{ item.orderType === "BUY" ? "买料" : "卖料" }}</text>
            </view>
            <view class="order-info">
              <text class="order-no">下单单价：{{ item.orderPrice || "--" }}</text>
            </view>
          </view>
          <view class="order-info-warps">
            <view class="order-info">
              <text class="order-no">克重：{{ item.weight || "--" }}</text>
            </view>
            <view class="order-info">
              <text class="order-no">定金：{{ formatNumber(item.retainerAmount) || "--" }}</text>
            </view>
            <view class="order-info">
              <text class="order-no">仓管费：{{ item.manageFee || "--" }}</text>
            </view>
          </view>
          <view class="order-info-warps">
            <view class="order-info">
              <text class="order-no">实时单价：{{ getRealTimePriceByOrder(item) || "--" }}</text>
            </view>
            <view class="order-footer">
              <text class="order-price">
                余额：{{ formatNumber(balance(item)) || "--" }}
              </text>
            </view>
          </view>
          <view class="order-actions">
            <button v-if="item.orderStatus === 'PENDING'" class="btn" @click.stop="cancelOrder(item)">
              违约结算
            </button>
            <button v-if="item.orderStatus === 'PENDING'" class="btn" @click.stop="addDeposit(item)">
              追加定金
            </button>
            <button v-if="item.orderStatus === 'PENDING'" class="btn" @click.stop="payOrder(item)">
              {{ item.orderType === 'BUY' ? '提货' : '交货' }}
            </button>
          </view>
        </view>
      </view>

      <!-- 加载提示 / 空状态 -->
      <view class="load-more" v-if="orderList.length === 0 && !loading">
        <text class="empty">暂无订单数据</text>
      </view>

      <!-- 底部安全区域，确保内容不被遮挡 -->
      <view class="scroll-bottom-safe"></view>
        <!-- 底部额外占位，确保最后一个订单项不被遮挡 -->
        <view class="bottom-extra-space"></view>
    </scroll-view>

    <!-- 定金操作弹窗 -->
    <view v-if="showDepositModal" class="modal-overlay" @click="closeModal">
      <view class="modal-content" @click.stop>
        <view class="modal-header">
          <text class="modal-title">{{ modalTitle }}</text>
          <text class="modal-close" @click="closeModal">×</text>
        </view>

        <view class="modal-body">
          <view class="form-item">
            <text class="form-label">订单号：</text>
            <text class="form-value">{{ currentOrder.orderNo }}</text>
          </view>

          <view class="form-item">
            <text class="form-label">当前定金：</text>
            <text class="form-value">￥{{ formatNumber(currentOrder.retainerAmount) || 0 }}</text>
          </view>

          <view class="form-item">
            <text class="form-label">{{ modalType === "add" ? "追加金额" : "提取金额" }}：</text>
            <input class="form-input" type="number" v-model="depositAmount" :placeholder="modalType === 'add' ? '请输入追加金额' : '请输入提取金额'
              " @input="onAmountInput" />
          </view>
        </view>

        <view class="modal-footer">
          <button class="btn-cancel" @click="closeModal">取消</button>
          <button class="btn-confirm" @click="confirmDeposit" :disabled="!canSubmit">
            确认
          </button>
        </view>
      </view>
    </view>
  </page-container>
</template>

<script>
import { isLoggedIn } from "@/utils/auth";
export default {
  data() {
    return {
      materialTypeOptions: {
        GOLD: "黄金",
        SILVER: "白银",
        PLATINUM: "铂金",
        PALLADIUM: "钯金",
      },
      orderStatusOptions: {
        WAIT_PAY: "待支付",
        PENDING: "已定价",
        WAIT_SHIPMENT: "待发货",
        COMPLETED: "已结算",
        CANCELLED: "已结算",
        PARTIALLY_FILLED: "部分成交",
        FILLED: "已成交",
      },
      orderStatusStyle: {
        WAIT_PAY: "warning",
        PENDING: "warning",
        WAIT_SHIPMENT: "warning",
        COMPLETED: "success",
        CANCELLED: "success",
        PARTIALLY_FILLED: "warning",
        FILLED: "success",
      },
      currentTab: 0, // 当前选中的标签页 0-进行中 1-已交付

      // 筛选选项
      productIndex: 0,
      productOptions: ["全部", "黄金", "白银"],

      typeIndex: 0,
      typeOptions: ["全部", "卖料", "买料"],

      timeIndex: 0,
      timeOptions: ["全部", "近七天", "一个月", "半年"],

      // 订单数据
      orderList: [],
      page: 1,
      pageSize: 99, // 一次性取全
      loading: false,
      noMore: false,
      refreshing: false, // 下拉刷新状态

      // 定金操作弹窗
      showDepositModal: false,
      modalType: "add", // 'add' or 'withdraw'
      currentOrder: {},
      depositAmount: "",
      newRetainerAmount: "",
      modalTitle: "",
      canSubmit: false,

      // 为每种物料类型添加独立的实时价格缓存
      materialPriceCache: {
        GOLD: {
          materialType: "GOLD",
          sellPrice: "--", // 销售价
          price: "--", // 回购价
        },
        SILVER: {
          materialType: "SILVER",
          sellPrice: "--", // 销售价
          price: "--", // 回购价
        },
      },



      // 滚动控制
      scrollTop: 0,
      dynamicScrollHeight: '100vh',
      showBackToTop: false,
      // 添加防抖定时器
      scrollTimer: null,
      // 导航栏高度
      navBarHeight: 0,
    };
  },
  onShow() {
    console.log('onShow', isLoggedIn())
    if (isLoggedIn()) {
      this.loadOrders();
    } else {
      uni.showModal({
        title: "提示",
        content: "您还没有登录，请先登录",
        confirmText: "去登录",
        cancelText: "取消",
        success: (res) => {
          uni.removeStorageSync("token");
          uni.removeStorageSync("customerInfo");
          if (res.confirm) {
            // #ifdef MP-WEIXIN
            uni.redirectTo({
              url: `/pages/login/quick`,
            });
            // #endif
            // #ifdef H5
            uni.redirectTo({
              url: `/pages/login/index`,
            });
            // #endif
          }
          if (res.cancel) {
            uni.switchTab({
              url: '/pages/home/index'
            })
          }
        },
      });
    }
  },
  onReady() {
    // this.calculateScrollHeight();
    // 动态计算导航栏高度并设置顶部内边距
    this.calculateNavBarHeight();
  },
  onUnload() {
    uni.$off("priceMessagesChanged");
    if (this.scrollTimer) {
      clearTimeout(this.scrollTimer);
      this.scrollTimer = null;
    }
  },
  onLoad() {
    uni.$on("priceMessagesChanged", (newMsg) => {
      this.updateMaterialPrice(newMsg.data.priceMap);
    });
  },
  methods: {
    toSettledOrder() {
      uni.navigateTo({
        url: "/pages/order/settledOrder",
      });
    },
    // 格式化数字，添加千分符
    formatNumber(num) {
      if (num === null || num === undefined || num === "") {
        return "--";
      }
      const number = parseFloat(num);
      if (isNaN(number)) {
        return "--";
      }
      return number.toLocaleString("zh-CN", {
        minimumFractionDigits: 2,
        maximumFractionDigits: 2,
      });
    },

    // 定金余额
    balance(item) {
      if (!item || !item.materialType || !item.orderType) {
        return 0;
      }

      const materialType = item.materialType;
      const orderType = item.orderType;
      const weight = parseFloat(item.weight) || 0;
      const orderPrice = parseFloat(item.orderPrice) || 0;
      const retainerAmount = parseFloat(item.retainerAmount) || 0;

      let currentPrice = 0;
      let priceDiff = 0;
      // 根据物料类型和订单类型获取对应的实时价格
      if (orderType === "BUY") {
        currentPrice = this.materialPriceCache[materialType]?.price || 0;
        priceDiff = currentPrice - orderPrice;
      } else if (orderType === "SELL") {
        currentPrice = this.materialPriceCache[materialType]?.sellPrice || 0;
        priceDiff = orderPrice - currentPrice;
      }

      if (currentPrice === 0 || weight === 0) {
        return Number(retainerAmount.toFixed(2));
      }

      // 计算余额：(实时单价 - 下单单价) * 克重 + 定金 - 仓管费
      const manageFee = parseFloat(item.manageFee) || 0;
      const balance = priceDiff * weight + retainerAmount - manageFee;

      return Number(balance.toFixed(2));
    },
    // 切换标签页
    switchTab(index) {
      if (this.currentTab !== index) {
        this.currentTab = index;
        this.page = 1;
        this.noMore = false;
        this.orderList = [];
        this.loadOrders();
      }
    },
    addDeposit(item) {
      this.currentOrder = item;
      this.modalType = "add";
      this.modalTitle = "追加定金";
      this.depositAmount = "";
      this.newRetainerAmount = "";
      this.canSubmit = false;
      this.showDepositModal = true;
    },
    payOrder(item) {
      uni.showModal({
        title: "结算订单",
        content: `确定要结算订单 ${item.orderNo} 吗？`,
        success: (res) => {
          if (res.confirm) {
            this.$http
              .get("/applet/customer/orders/buy/" + item.id)
              .then((res) => {
                if (res.code === 200) {
                  uni.showToast({
                    title: res.msg || "结算成功",
                    icon: "success",
                  });
                  this.refreshList();
                }
              });
          }
        },
      });
    },
    cancelOrder(item) {
      uni.showModal({
        title: "违约结算",
        content: `确定要违约结算订单 ${item.orderNo} 吗？`,
        success: (res) => {
          if (res.confirm) {
            this.$http
              .get(`/applet/customer/orders/cancel/${item.id}`)
              .then((res) => {
                if (res.code === 200) {
                  uni.showToast({
                    title: res.msg || "违约结算成功",
                    icon: "success",
                  });
                  // 重置分页状态并重新加载订单列表
                  this.page = 1;
                  this.noMore = false;
                  this.orderList = [];
                  this.loadOrders();
                }
              });
          }
        },
      });
    },

    // 加载订单数据
    async loadOrders() {
      console.log('loadOrders')

      if (this.loading || this.noMore) {
        console.log('loadOrders return')
        return;
      }
      console.log('loadOrders true')
      this.loading = true;

      try {
        let params = {
          size: this.pageSize,
          current: this.page,
          // "materialType": "string",
          // "orderType": "BUY",
          // "minOrderTime": "string",
          // "maxOrderTime": "string"
        };
        let res = await this.$http.post("/applet/customer/orders/list", params);

        const newOrders = res.data.records || [];
        if (this.page === 1) {
          this.orderList = newOrders;
        } else {
          this.orderList = [...this.orderList, ...newOrders];
        }

        this.noMore = newOrders.length < this.pageSize;
        this.page++;

      
      } catch (error) {
        uni.showToast({
          title: error.msg || "加载失败",
          icon: "none",
        });

        console.error("加载订单失败:", error);
      } finally {
        this.loading = false;
      }
    },
    // 下拉刷新（优化版）
    async onRefresh() {
      this.refreshing = true;


      // 等待一小段时间确保滚动完成
      await new Promise(resolve => setTimeout(resolve, 200));

      this.page = 1;
      this.noMore = false;
      this.orderList = [];

      try {
        await this.loadOrders();
      } catch (error) {
        uni.showToast({
          title: '刷新失败',
          icon: 'none'
        });
      } finally {
        this.refreshing = false;
        uni.stopPullDownRefresh();
      }
    },

    handleDetails(item) {
      uni.navigateTo({
        url: `/pages/order/flowList?id=${item.id}`,
      });
    },

    // 筛选条件变化
    onProductChange(e) {
      this.productIndex = e.detail.value;
      this.refreshList();
    },

    onTypeChange(e) {
      this.typeIndex = e.detail.value;
      this.refreshList();
    },

    onTimeChange(e) {
      this.timeIndex = e.detail.value;
      this.refreshList();
    },

    // 刷新列表
    refreshList() {
      this.page = 1;
      this.noMore = false;
      this.orderList = [];
      this.selectedOrders = [];
      this.isAllSelected = false;

      // 重置滚动位置到顶部
      this.scrollTop = -44;

      this.loadOrders();
    },
    // 定金操作弹窗相关方法
    closeModal() {
      this.showDepositModal = false;
      this.currentOrder = {};
      this.depositAmount = "";
      this.newRetainerAmount = "";
      this.canSubmit = false;
    },

    onAmountInput(e) {
      const value = e.detail.value;
      this.depositAmount = value;
      this.calculateNewAmount();
      this.canSubmit = this.validateAmount(value);
    },

    calculateNewAmount() {
      const currentAmount = parseFloat(this.currentOrder.retainerAmount) || 0;
      const inputAmount = parseFloat(this.depositAmount) || 0;

      if (this.modalType === "add") {
        this.newRetainerAmount = (currentAmount + inputAmount).toFixed(2);
      } else if (this.modalType === "withdraw") {
        this.newRetainerAmount = (currentAmount - inputAmount).toFixed(2);
      }
    },

    validateAmount(value) {
      if (value === "") {
        return false;
      }
      const num = parseFloat(value);
      if (isNaN(num) || num <= 0) {
        return false;
      }

      // 如果是提取定金，需要验证提取金额不超过当前定金
      if (this.modalType === "withdraw") {
        const currentAmount = parseFloat(this.currentOrder.retainerAmount) || 0;
        if (num > currentAmount) {
          return false;
        }
      }

      return true;
    },

    async confirmDeposit() {
      let cusId = uni.getStorageSync("customerInfo").id;
      if (!this.canSubmit) {
        uni.showToast({
          title: "请输入有效金额",
          icon: "none",
        });
        return;
      }

      const amount = parseFloat(this.depositAmount);
      let url = "";
      let method = "post";
      let params = {};
      if (this.modalType === "add") {
        url = `/applet/customer/orders/addRetainer`;
        params = {
          orderId: this.currentOrder.id,
          cusId: cusId || "",
          retainerAmount: amount,
        };
      } else if (this.modalType === "withdraw") {
        url = `/applet/customer/orders/retainerTake`;
        params = {
          orderId: this.currentOrder.id,
          cusId: cusId || "",
          retainerAmount: amount,
        };
      }

      try {
        const res = await this.$http[method](url, params);
        if (res.code === 200) {
          uni.showToast({
            title: `${this.modalType === "add" ? "补充" : "提取"}定金成功`,
            icon: "success",
          });

          // 更新本地订单数据
          const index = this.orderList.findIndex(
            (order) => order.id === this.currentOrder.id
          );
          if (index > -1) {
            if (this.modalType === "add") {
              this.orderList[index].retainerAmount =
                parseFloat(this.orderList[index].retainerAmount || 0) + amount;
            } else {
              this.orderList[index].retainerAmount =
                parseFloat(this.orderList[index].retainerAmount || 0) - amount;
            }
          }

          this.closeModal();

          // 刷新订单列表
          this.refreshList();
        } else {
          uni.showToast({
            title:
              res.msg ||
              `${this.modalType === "add" ? "补充" : "提取"}定金失败`,
            icon: "none",
          });
        }
      } catch (error) {
        uni.showToast({
          title: error.msg || "定金操作失败",
          icon: "none",
        });
      }
    },

    // 更新物料价格
    updateMaterialPrice(priceData) {
      this.materialPriceCache = priceData;
    },

    // 动态计算滚动区域高度（优化版）
    calculateScrollHeight() {
      try {
        const systemInfo = uni.getSystemInfoSync();
        const windowHeight = systemInfo.windowHeight;
        const statusBarHeight = systemInfo.statusBarHeight || 0;
        const navBarHeight = statusBarHeight + 44; // 导航栏高度
        const bottomSafe = 160; // 底部安全区域高度
        const tabBarHeight = 100; // tabBar高度（如果有的话）

        // 计算可用高度，确保有足够的底部空间
        const availableHeight = windowHeight - navBarHeight - bottomSafe - tabBarHeight;

        // 使用计算出的高度，确保有足够空间
        this.dynamicScrollHeight = `${Math.max(availableHeight, 500)}px`;
      } catch (error) {
        console.error('计算滚动高度失败:', error);
        // 使用默认高度
        this.dynamicScrollHeight = 'calc(100vh - 200rpx)';
      }
    },

    // 动态计算导航栏高度并设置顶部内边距
    calculateNavBarHeight() {
      try {
        // 获取系统信息
        const systemInfo = uni.getSystemInfoSync()
        this.statusBarHeight = systemInfo.statusBarHeight || 0

        // #ifdef MP-WEIXIN
        // 小程序模式下，获取胶囊按钮信息来精确计算导航栏高度
        const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
        console.log('胶囊按钮信息:', menuButtonInfo)

        if (menuButtonInfo && menuButtonInfo.top > 0 && menuButtonInfo.height > 0) {
          // 导航栏高度 = 胶囊底部到状态栏底部的距离 + 安全边距
          this.navBarHeight = menuButtonInfo.top - this.statusBarHeight + menuButtonInfo.height + 8
          console.log('使用胶囊信息计算导航栏高度:', this.navBarHeight)
        } else {
          // 胶囊信息获取失败，使用更准确的默认计算
          // 在小程序中，导航栏通常是44px，加上状态栏高度
          this.navBarHeight = this.statusBarHeight + 44
          console.log('胶囊信息获取失败，使用默认计算导航栏高度:', this.navBarHeight)
        }
        // #endif

        // #ifndef MP-WEIXIN
        // 非小程序模式，使用标准计算
        this.navBarHeight = this.statusBarHeight + 44

        // 如果是iPhone X及以上设备，需要加上安全区域
        if (systemInfo.model && systemInfo.model.includes('iPhone')) {
          if (systemInfo.safeAreaInsets) {
            this.navBarHeight += systemInfo.safeAreaInsets.top || 0
          }
        }
        // #endif

        console.log('状态栏高度:', this.statusBarHeight)
        console.log('导航栏总高度:', this.navBarHeight)
        console.log('按钮区域top值:', this.navBarHeight + 'px')

      } catch (error) {
        console.error('获取系统信息失败:', error)
        // 使用默认值
        this.navBarHeight = 88
        this.statusBarHeight = 20
      }
    },

    getRealTimePriceByOrder(item) {
      if (!item || !item.materialType || !item.orderType) {
        return "--";
      }

      const materialType = item.materialType;
      const orderType = item.orderType;

      // 检查物料类型是否支持
      if (!this.materialPriceCache[materialType]) {
        return "--";
      }

      // 根据订单类型获取对应价格
      let price = 0;
      if (orderType === "BUY") {
        price = this.materialPriceCache[materialType].price;
      } else if (orderType === "SELL") {
        price = this.materialPriceCache[materialType].sellPrice;
      }

      return price && price > 0 ? this.formatNumber(price) : "--";
    },

    // 监听滚动事件
    onScroll(e) {
      const scrollTop = e.detail.scrollTop;
      this.showBackToTop = scrollTop > 300;

      // 更新scrollTop值以确保一致性
      this.scrollTop = scrollTop;
    },
  },
};
</script>
<style scoped lang="scss">
@import "@/uni.scss";
// .order-page {
//   display: flex;
//   flex-direction: column;
//   height: 100vh;
//   background-color: #f5f5f5;
//   position: relative;
// }

.order-list {
  flex: 1;
  position: relative;
  // height: 100%;
  /* 确保滚动区域可以正确滚动 */
  overflow-anchor: none;
  background-color: #f5f5f5;
  /* 为底部 tabbar 和安全区预留空间，避免列表被遮挡 */
  // padding-bottom: calc(40rpx + env(safe-area-inset-bottom));
  /* 兼容不支持 env 的环境 */
  // padding-bottom: 120rpx;
}

.scroll-bottom-safe {
  height: 160rpx;
  /* 增加底部安全区域高度，确保内容不被遮挡 */
  width: 100%;
  background-color: transparent;
}

/* 底部额外占位空间 */
.bottom-extra-space {
  height: calc(120rpx + env(safe-area-inset-bottom));
  width: 100%;
  background-color: transparent;
}

/* 下拉刷新指示器样式 */
.refresher-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20rpx 0;
  background-color: #f5f5f5;
}

.refresher-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.order-item {
  display: flex;
  align-items: center;
  padding: 20rpx;
  margin: 20rpx;
  background-color: #fff;
  border-radius: 10rpx;
  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05);
}

/* 为最后一个订单项添加底部边距 */
.order-item:last-of-type {
  margin-bottom: 200rpx !important;
}

/* 备用方案：使用nth-last-child */
.order-item:nth-last-child(1) {
  margin-bottom: 200rpx !important;
}

.order-content {
  flex: 1;
  margin-left: 20rpx;
}

.order-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10rpx;
}

.order-no {
  font-size: 26rpx;
  color: #333;
  margin-right: 20rpx;
}

.order-status {
  font-size: 24rpx;
}

.order-status.warning {
  color: #fff;
  background-color: #ff9500;
  padding: 4rpx 10rpx;
  border-radius: 10rpx;
}

.order-status.success {
  color: #fff;
  background-color: #4cd964;
  padding: 4rpx 10rpx;
  border-radius: 10rpx;
}

.order-status.error {
  color: #fff;
  background-color: #ff3b30;
  padding: 4rpx 10rpx;
  border-radius: 10rpx;
}

.order-info {
  display: flex;
  flex-direction: column;
}

.price-update-time {
  font-size: 20rpx;
  color: #999;
  margin-top: 4rpx;
}

.product-name {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 5rpx;
}

.order-time {
  font-size: 24rpx;
  color: #999;
}

.order-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.order-price {
  font-size: 28rpx;
  color: $uni-text-color-black;
}

.order-price.updating {
  color: #ff9500;
  /* 价格更新时的颜色 */
  animation: pulse 1s infinite;
  /* 添加闪烁动画 */
}

.order-actions {
  display: flex;
  margin-top: 10rpx;
}

.btn {
  padding: 0 20rpx;
  height: 50rpx;
  line-height: 50rpx;
  font-size: 24rpx;
  border-radius: 10rpx;
  background-color: #fff;
  color: $uni-text-color-orange;
  background-color: $uni-text-color-black;
  margin-right: 20rpx !important;
  margin-left: 0 !important;
}

.load-more {
  text-align: center;
  padding: 20rpx;
  font-size: 24rpx;
  color: #999;
}

.loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.loading-text {
  margin-bottom: 10rpx;
}

.loading-dots {
  display: flex;
  align-items: center;
  justify-content: center;
}

.dot {
  width: 8rpx;
  height: 8rpx;
  border-radius: 50%;
  background-color: #999;
  margin: 0 4rpx;
  animation: loading 1.4s infinite ease-in-out both;
}

.dot:nth-child(1) {
  animation-delay: -0.32s;
}

.dot:nth-child(2) {
  animation-delay: -0.16s;
}

@keyframes loading {

  0%,
  80%,
  100% {
    transform: scale(0);
    opacity: 0.5;
  }

  40% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes pulse {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0.6;
  }

  100% {
    opacity: 1;
  }
}

.no-more {
  color: #999;
}

.empty {
  color: #ccc;
  font-size: 26rpx;
}

/* 回到顶部按钮样式 */
.back-to-top {
  position: fixed;
  right: 30rpx;
  bottom: 200rpx;
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 36rpx;
  z-index: 99999;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
  pointer-events: auto;
}

.back-to-top:active {
  transform: scale(0.95);
  background-color: rgba(0, 0, 0, 0.9);
}

.back-to-top-text {
  color: #fff;
  font-weight: bold;
}

/* 定金操作弹窗样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background-color: #fff;
  border-radius: 40rpx;
  width: 90%;
  position: relative;
  margin: 0 56rpx;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
  padding: 30rpx 20rpx;
  border-bottom: 2rpx solid #eee;
}

.modal-title {
  font-size: 33rpx;
  font-weight: bold;
  color: $uni-text-color-black;
}

.modal-close {
  font-size: 40rpx;
  color: #999;
  font-weight: bold;
}

.modal-body {
  padding-bottom: 20rpx;
  padding-left: 20rpx;
  padding-right: 20rpx;
}

.form-item {
  flex: 1;
  display: flex;
  align-items: center;
  margin-bottom: 26rpx;
  font-size: 28rpx;
  color: #333;
}

.form-label {
  font-weight: bold;
  margin-right: 20rpx;
  width: 150rpx;
  text-align: right;
}

.form-value {
  font-size: 28rpx;
  color: $uni-text-color-black;
  font-weight: bold;
}

.form-input {
  flex: 1;
  font-size: 28rpx;
  color: $uni-text-color-black;
  padding: 20rpx 15rpx;
  border: 1rpx solid #eee;
  border-radius: 8rpx;
  background-color: #f9f9f9;
  min-width: 200rpx;
  transition: all 0.3s ease;
}

.form-input:focus {
  border-color: $uni-text-color-orange;
  background-color: #fff;
  box-shadow: 0 0 0 2rpx rgba(255, 149, 0, 0.2);
}

.modal-footer {
  display: flex;
  justify-content: space-around;
  padding: 30rpx 26rpx;
  border-top: 2rpx solid #eee;
}

.btn-cancel,
.btn-confirm {
  flex: 1;
  margin: 0 10rpx;
  padding: 8rpx 0;
  font-size: 28rpx;
  border-radius: 16rpx;
  border: 2rpx solid transparent;
  color: #fff;
  font-weight: bold;
}

.btn-cancel {
  background-color: transparent;
  color: $uni-text-color-black;
  border: 2rpx solid $uni-text-color-black;
}

.btn-confirm {
  color: $uni-text-color-orange;
  background-color: $uni-text-color-black;
}

.btn-confirm:disabled {
  background-color: #ccc;
  color: #666;
}

/* 弹窗动画效果 */
.modal-overlay {
  animation: fadeIn 0.3s ease;
}

.modal-content {
  animation: slideIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes slideIn {
  from {
    transform: translateY(-50rpx);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* 响应式设计 */
@media screen and (max-width: 750rpx) {
  .modal-content {
    width: 90%;
  }

  .form-input {
    margin-top: 10rpx;
    width: calc(100% - 40rpx);
  }
}

.order-info-warps {
  display: flex;
  gap: 10rpx;
  align-items: center;
  margin-bottom: 20rpx;
}

.order-list-warp {
  display: flex;
  justify-content: flex-end;

  .order-list-title {
    font-size: 24rpx;
    color: #d4af37;
    font-weight: bold;
    margin-right: 26rpx;
    margin-top: 20rpx;
    background-color: #0b1f20;
    padding: 10rpx 20rpx;
    border-radius: 10rpx;
    letter-spacing: 2rpx;
  }
}

/* 右侧按钮样式 */
.header-right-warps {
  display: flex;
  justify-content: flex-end;
  // padding: 20rpx 26rpx;
  // border-bottom: 1rpx solid #eee;
  // box-shadow: 0 0 10rpx 0 rgba(0, 0, 0, 0.1);
  position: fixed;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 20rpx 20rpx 10rpx 20rpx;
  background-color: #ffffff;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  border-bottom: 1rpx solid #eeeeee;
  transition: top 0.3s ease;  
  .right-header-btn {
    font-size: 24rpx;
    color: #d4af37;
    background: linear-gradient(135deg, #0b1f20 0%, #1c2f31 100%);
    border-radius: 999rpx;
    padding: 12rpx 22rpx;
    white-space: nowrap;
    transition: transform 0.12s ease, box-shadow 0.2s ease;
    width: max-content;

  }

  .right-header-btn:hover {
    transform: translateY(-2rpx);
  }

  .right-header-btn:active {
    transform: scale(0.98);
  }
}
</style>
